<template>
  <div class="app">
    <home></home>
    <hr>
    <h2>{{ message }}</h2>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
  import Home from './Home.vue'
  import { computed } from 'vue'
  
  export default {
    components: {
      Home
    },
    data() {
      return {
        message: "Hello App"
      }
    },
    // provide: {
    //   name: 'why',
    //   age: 18,
    //   message: this.message // 这是错误的,对象provide没有自己的作用域,这里的this是undefined
    // }
    provide() {
      console.log(this)
      return {
        name: 'why',
        age: 18,
        // message: this.message // 这是正确的,对象provide有自己的作用域,这里的this是当前组件实例
        message: computed(() => this.message) // 响应式数据
      }
    },
    methods: {
      changeMessage() {
        this.message = "修改后的App"
      }
    }
  }
</script>

<style scoped>
</style>